import React,{useEffect,useState} from 'react'
import {useParams,useLocation,useNavigate} from "react-router-dom";
import {ProductCard,ActionBar} from "react-vant";
import { ArrowLeft , CartO, ChatO, ShopO} from '@react-vant/icons';
import {useDispatch,useSelector} from "react-redux"
import {ADDLIST,AllTYPES} from "../../types/store.d"

interface DATELISTTYPES{
    id?:string;
    name?:string;
    img?:string;
}
export default function Datelist(state:any) {
    const dispatch=useDispatch()
    const navigate=useNavigate()
    const params=useParams()
    const location=useLocation()
    const [datelis,setdatelis]=useState<DATELISTTYPES>({})
    const shopcarNum=useSelector((state:AllTYPES)=>{
        return state.shopcar.length
    })
    useEffect(() => {
        // console.log(location.state,params);
        setdatelis(location.state as DATELISTTYPES)
    }, [])
    const setlist=()=>{
        dispatch({
            type:ADDLIST,
            payload:location.state
        })
    }
    return (
        <div>
            <ArrowLeft fontSize="30px" onClick={()=>navigate(-1)}  />
            <ProductCard
                
                
                num="1"
                price="2.00"
                desc="描述信息"
                title={datelis.name}
                thumb={datelis.img}
              />
                <ActionBar>
      <ActionBar.Icon icon={<ChatO />}  text="客服" />
      <ActionBar.Icon icon={<CartO />} badge={{ content: shopcarNum }} text="购物车" />
      <ActionBar.Icon icon={<ShopO />} onClick={()=>navigate("/home/shop")}  text="去购物车" />
      <ActionBar.Button type="warning" onClick={() => setlist()} text="加入购物车" />
      {/* <ActionBar.Button type="danger" text="立即购买" /> */}
    </ActionBar>
        </div>
    )
}
